<template>
	<view class="container">
	  <view class="list_wrap">
	    <view class="list_item flex_box" v-for='(item,index) in list' :key='item.id'>
	      <image :src="item.isChecked?check1:check2" class="check_icon" @tap="checkChange(item)"></image>
	      <image :src="item.teacherInfo.headPic" class="avatar"></image>
	      <view class="flex1">
	       <view class="flex_box">
	        <view class="flex1 title">{{item.teacherInfo.teacherName}}</view>
	        <image src="@/static/images/del.png" class="del_icon" @tap="delOne(item.id,index)"></image>
	       </view>
	        <view class="tags flex_box">
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle1">{{item.teacherInfo.teachStyle1}}</view>
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle2">{{item.teacherInfo.teachStyle2}}</view>
	          <view class="tag tag_organge" v-if="item.teacherInfo.teachStyle3">{{item.teacherInfo.teachStyle3}}</view>
	          <!-- <view class="tag tag_green" v-if="getDayStatus(item.teacherInfo,1)">周六{{getDayStatus(item.teacherInfo,1)}}</view>
	          <view class="tag tag_green" v-if="getDayStatus(item.teacherInfo,2)">周日{{getDayStatus(item.teacherInfo,2)}}</view> -->
	        </view>
	        <view class="flex_between">
	          <view class="price">¥{{item.teacherInfo.classPrice}}/时</view>
	          <view class="flex_box">
	            <image src="@/static/images/add1.png" class="add_icon" @tap="numChange(1,item)"></image>
	            <view class="num">{{item.teachCount}}</view>
	            <image src="@/static/images/add.png" class="add_icon" @tap="numChange(2,item)"></image>
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
		<view class="no_message" v-if="list.length==0">
			<image src="../../static/images/empty1.png" class="empty"></image>
			<view class="empty_text">购物车空空如也</view>
		</view>
	  <view class="control_box flex_box" v-if="list.length>0">
	    <view class="flex1 flex_box">
	      <image :src="isCheckAll?check1:check2" class="check_icon" @tap="checkAllChange()"></image>
	      <view class="flex1">全选</view>
	      <view class="heji">合计：</view>
	      <view class="total">￥{{total}}</view>
	    </view>
	    <view class="btn org_btn" @tap="goOrder">去支付</view>
	  </view>
	</view>
</template>

<script>
	import {getDayStatus,toast} from '@/common/js/public.js'
	export default {
		data() {
			return {
				list:[],// 数据
				check1:require('@/static/images/check.png'), // 选中icon
				check2:require('@/static/images/nocheck.png'), // 未选中icon
				isCheckAll:false, //  是否全部选中
				customerInfo:'',
				ip:''
			}
		},
		onLoad() {
			uni.removeStorageSync('pay_param')
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			if (this.customerInfo) {
				this.queryShoppingcartList()
			}
		},
		computed:{
			total() {
				let total = 0
				this.list.forEach(ele=>{
					if (ele.isChecked) {
						total += ele.teacherInfo.classPrice * ele.teachCount
					}
				})
				return total
			}
		},
		methods: {
			// 查询列表
			queryShoppingcartList() {
				let param = {
					customerCode:this.customerInfo.customerCode
				}
				this.$api.queryShoppingcartList(param).then(res=>{
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			getDayStatus(item,type) {
				return getDayStatus(item,type)
			},
			// 去确认订单
			goOrder() {
				let list = []
				this.list.forEach(ele=>{
					if (ele.isChecked) {
						list.push(ele)
					}
				})
				if (list.length == 0) {
					toast('请先选择要下单的课程')
					return
				}
				let param = {
					"orderAmt": this.total,
					// orderAmt:0.01,
					"list": list,
					"shoppingcartFlag": 1
				}
				uni.setStorageSync('pay_param',param)
				uni.navigateTo({
					url: '/pages/order/order',
				})
			},
			// 单个单选框的选中
			checkChange(item) {
				if (item.isChecked) {
					item.isChecked = false
					this.isCheckAll = false
				} else {
					this.$set(item,'isChecked',true)
				}
			},
			// 全选全不选
			checkAllChange() {
				this.isCheckAll = !this.isCheckAll
				this.list.forEach(ele=>{
					this.$set(ele,'isChecked',this.isCheckAll)
				})
			},
			// 数量的增加减少
			numChange(type,item) {
				let teachCount
				if (type==1) {
					if (item.teachCount <= item.teacherInfo.minClassCount) {
						toast('不能小于最小课时')
						return
					}
					teachCount = item.teachCount - 1
				} else {
					if (item.teachCount>=item.total) return
					teachCount = item.teachCount + 1
				}
				let param = {
					"customerCode": this.customerInfo.customerCode,
					"id": item.id,
					"teachCount": teachCount,
					"teacherNo": item.teacherNo
				}
				this.$api.updateCartInfo(param).then(res=>{
					if (res.code == 1) {
						if (type==1) {
							item.teachCount--
						} else {
							item.teachCount++
						}
					} else {
						toast(res.msg)
					}
				})
			},
			delOne(id,idx) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.deleteCartInfo({id:id}).then(res1=>{
								if (res1.code == 1) {
									toast('删除成功')
									this.list.splice(idx,1)
								} else {
									toast(res.msg)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
	  min-height: 100vh;
	  background-color: #FAFAFA;
	  padding-bottom: 130rpx;
	  box-sizing: border-box;
	}
	.del_icon{
	  width: 28rpx;
	  height: 30rpx;
	  margin-left: 20rpx;
	}
	.control_box{
	  position: fixed;
	  left: 0;
	  bottom:0;
	  width: 100%;
	  padding:15rpx 30rpx;
	  box-sizing: border-box;
	  background-color: #fff;
	}
	.org_btn{
	  width: 260rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #EA7355;
	  border-radius: 70rpx;
	  margin-left: 30rpx;
	}
	.no_message{
		height: calc(100vh - 130rpx);
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.empty{
		width: 368rpx;
		height: 260rpx;
	}
	.empty_text{
		font-size: 28rpx;
		color:#999;
		line-height: 80rpx;
	}
</style>
